<template>
    <div>
      <!-- 列表组件 -->
      <el-table :data="userlist" border style="width: 100%">
        <el-table-column prop="uid" label="用户编号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名称" width="180">
        </el-table-column>
        <el-table-column prop="rolename" label="所属角色"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="item">
            <div>
              <span v-if="item.row.status == 1">正常</span>
              <span v-else>禁用</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="item">
            <div>
              <el-button
                class="btnInfo"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="edit(item.row.uid)"
              ></el-button>
              <el-button
                class="btnInfo"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="del(item.row.uid)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 
      background 是否为分页按钮添加背景色	boolean
      total	总条目数	number
      layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot
      page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
      current-change	currentPage 改变时会触发	当前页
      -->
      <el-pagination @current-change="changePage" :page-size="getSize" background layout="prev, pager, next" :total="count">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { userdelete } from "../../request/api";
  //辅助性函数
  import { mapGetters, mapActions } from "vuex";
  export default {
    computed:{
      ...mapGetters({
        userlist:'user/getUser',
        count:'user/getCount',
        getSize:'user/getSize'
      })
    },
    mounted(){
      //组件一加载就触发行动
      this.getUserAction()
      //总条数
      this.getCountAction()
    },
    methods: {
      //封装一个切换页码的方法
      changePage(n){
        console.log(n,'页码数')
        this.changePageAction(n)
      },
      ...mapActions({
        getUserAction:'user/getUserAction',
        getCountAction:'user/getCountAction',
        changePageAction:'user/changePageAction'
      }),
      //点击编辑按钮事件
      edit(uid) {
        this.$emit("edit", uid);
      },
      //封装一个删除事件
      del(uid) {
        this.$confirm("你确定要删除这条数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            userdelete({ uid }).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                //重新调用列表以及总条数行动
                this.$store.dispatch("user/getUserAction");
                this.$store.dispatch("user/getCountAction");
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
  };
  </script>
  
  <style scoped></style>
  